import { search } from '@/services/api/essay';
import { convertPageData } from '@/utils/request';
import { ActionType, PageContainer, ProColumns, ProTable, ProFormTextArea } from '@ant-design/pro-components';
import { useRef, useState } from 'react';



export default () => {
    const refAction = useRef<ActionType>(null);
    const [selectedRowKeys, selectRow] = useState<number[]>([]);
    const [essay, setEssay] = useState<API.LuceneResultBookVO>();
    const [visible, setVisible] = useState(false);
    const columns: ProColumns<API.LuceneResultBookVO>[] = [
      {
        title: '文章ID',
        dataIndex: 'bookId',
        width: 100,
        search: false,
      },
      {
        title: '文章标题',
        dataIndex: 'title',
        width: 150,
        search: false,
        render: (dom, record) => {
          return (
            <a
              onClick={() => {
                setEssay(record);
                setVisible(true);
              }}
            >
              {dom}
            </a>
          );
        },
      },
      {
        title: '文章内容',
        dataIndex: 'content',
        width: 800,
        render: (_: any, record) => {  // 定义一个渲染函数，接收两个参数，忽略第一个参数，将第二个参数作为数据源
          const text = record?.highlights?.join('...') || '';  // 从record中获取高亮文本，用'...'连接多段文本，如果不存在则设置为空字符串
          return <div dangerouslySetInnerHTML={{ __html: text }}></div>  // 返回一个包含HTML标签的React元素，将text渲染为HTML格式
        }
      },
      {
        title: '相关度',
        dataIndex: 'score',
        search: false,
      },

    ];
  
    return (
      <PageContainer>  
        <ProTable<API.LuceneResultBookVO>  // 使用Ant Design Pro的ProTable组件作为表格
          actionRef={refAction}  // 将refAction作为表格的actionRef属性
          rowKey="bookID"  // 将"bookID"作为表格的rowKey属性
          manualRequest = {true}  // 设置manualRequest属性为true，表示手动发送数据请求
          request={async (params = {}) => {  // 定义异步请求函数，接收参数params
            return convertPageData(await search(params));  // 调用search函数查询数据并转换为ProTable组件的格式
          }}
          columns={columns}  // 定义表格列属性为columns
          rowSelection={{  // 定义表格行选择属性
            onChange: (rowKeys) => {  // 定义onChange回调函数，当选择行发生变化时调用
              selectRow(rowKeys as number[]);  // 调用selectRow函数更新选择的行数据
            },
          }}
        />
      </PageContainer>
    );
    
  };
  